float浮動，浮動一開始的用法是拿來做文繞圖的效果，後面拿來做更多排版的事情
(文繞圖)

浮動會將物件重新排列

    <div style="background-color: rgba(128, 255, 0, 0.575);">
        div1
    </div>
    <div style="background-color: skyblue">
        div2
    </div>
        <div style="background-color: violet">
        div3
    </div>
        <div style="background-color: dimgrey">
        div4
    </div>

現在這裡是4個div

現在給div1加上float:left向左浮動

    <div style="background-color: rgba(128, 255, 0, 0.575);float: left;">
        div1
    </div>

會看到div1看起來沒有改變，但是原本下面的div2卻不見了,div3還有文字跟它重疊，這是因為div2的區塊其實在div1的下面，float會使物件形成類似飛天的效果，雖然在網頁上看不出來，但是實際上div1現在其實在其他物件的上方，而float不會導致文字被蓋過，所以會往下排列，原本的區塊則是在div1浮動後往前排，這是上下排列的情況，如果彼此間是左右排的話，則不會被蓋過

我們再給div2來個float就會看到一樣的情況了

    <div style="background-color: rgba(128, 255, 0, 0.575);float: left;">
        div1
    </div>
    <div style="background-color: skyblue;float: left;">
        div2
    </div>

float可以讓物件往右或左靠，直到碰到父元素的邊界或是遇到另一個float
現在是不同的情況，所有的div都被設成了行內塊(inline-block)

 div{width: 200px;height: 100px;display: inline-block;}

    <div style="background-color: rgba(128, 255, 0, 0.575);">
        div1
    </div>
    <div style="background-color: skyblue;">
        div2
    </div>
        <div style="background-color: violet;">
        div3
    </div>
    <div style="background-color: dimgrey">
        div4
    </div>
    <div style="background-color: pink;">
        div5
    </div>

分別給div1右浮動，div3,5左浮動

    <div style="background-color: rgba(128, 255, 0, 0.575);float: right;">
        div1
    </div>
    <div style="background-color: violet;float: left;">
        div3
    </div>
    <div style="background-color: pink;float: left;">
        div5
    </div>

原本在左邊的div1在右浮動後直接到最右邊了，div3則是到最左邊，div5因為前面已經有同為浮動的div3所以排在它的後面

當浮動的物件塞不下時會換行排列

將div2的寬度從90vw改成60vw後div3塞的進，重新回到與div2同行，但是div5塞不下了就仍然是到下行排列


float還有一種特性是讓使用的物件變成以內容撐開
原div

加入float後

透過clear可以清除浮動造成的影響

   <div style="background-color: rgba(128, 255, 0, 0.575);float: left;">
        div1
    </div>
    <div style="background-color: skyblue;width: 50vw;">
        div2        
    </div>

clear後


如果是左浮動但是你清除的是右浮動的話則不會有作用


clear:left清除左浮動
clear:right清除右浮動
clear:both清除左和右浮動